<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>仪表盘</span>
      </div>
      <el-row>
        <div
          id="myChart"
          :style="{ width: '50%', height: '500px', display: 'inline-block' }"
        ></div>
        <div
          id="myPre"
          :style="{ width: '40%', height: '500px', display: 'inline-block' }"
        ></div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { reqHomeInfo } from "../api";
// 引入基本模板
let echarts = require("echarts/lib/echarts");
export default {
  name: "Home",
  // data
  data() {
    return {
      classesVo: [],
      xData: [],
      yData: [],
      preDate: [],
    };
  },
  // mounted
  mounted() {
    this.initClassesVo();
  },
  // methods
  methods: {
    // 初始化仪表盘信息
    async initClassesVo() {
      const { data } = await reqHomeInfo();
      this.classesVo = data.vos;
      this.initData();
    },
    initData() {
      const x = [];
      const y = [];
      this.classesVo.forEach((c) => {
        x.push(c.classesName);
        y.push(c.count);
      });
      this.xData = [...x];
      this.yData = [...y];
      this.initPreData();
      this.drawLine();

      this.drawPer();
    },
    initPreData() {
      const pre = [];
      this.classesVo.forEach((c) => {
        pre.push({ value: c.count, name: c.classesName });
      });
      this.preDate = pre;
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      const x = [...this.xData];
      const y = this.yData;
      myChart.setOption({
        title: { text: "商品数量仪表盘" },
        tooltip: {},
        legend: {
          data: ["商品数量"],
        },
        xAxis: {
          data: x,
        },
        color: "#545C64",
        yAxis: {},
        series: [
          {
            name: "商品数量",
            type: "bar",
            data: y,
          },
        ],
      });
    },

    drawPer() {
      let myChart = echarts.init(document.getElementById("myPre"));
      const pre = this.preDate;
      const option = {
        title: {
          text: "商品分类",
          subtext: "数据统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        color: ["#E6A23C", "#5C656E", "#FEF0F0", "#21A0FF"],
        series: [
          {
            name: "商品数量",
            type: "pie",
            radius: "50%",
            data: pre,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>